<template>
	<wd-tabs v-model="tab" swipeable animated :sticky="true">
		<block v-for="item in props.palletList" :key="item.id">
			<wd-tab :title="`${item[baseStore.language.code + 'Name']}`">
				<view class="content">
					<ProductItem v-for="product in item.goodsList" :key="product.id" :product="product"></ProductItem>
				</view>
			</wd-tab>
		</block>
	</wd-tabs>
</template>
<script setup>
import { useBaseStore } from '@/store/base'
import ProductItem from './productItem.vue'

const tab = ref(0)
const baseStore = useBaseStore()

const props = defineProps({
	palletList: {
		type: Array,
		default: () => [],
	},
})
</script>
<style lang="scss" scoped>
.content {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;

	align-items: center;
	/* #ifdef APP */
	justify-content: space-between;
	/* #endif */

	/* #ifdef H5 */
	justify-content: center;
	gap: 24rpx;

	/* #endif */

	width: 100%;
	min-height: calc(100vh - var(--window-bottom) - var(--window-top));

	padding: 0 12rpx;
	overflow-y: auto;
	text-align: center;

	background-color: #f2f2f2;

	.sub-category {
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		gap: 12rpx;
		align-items: center;
		justify-content: flex-start;
		width: 100%;

		padding: 12rpx;

		.sub-category-item {
			box-sizing: border-box;
			min-width: 160rpx;
			height: 60rpx;
			padding: 0 25rpx;
			font-size: 28rpx;
			line-height: 60rpx;
			color: #666;
			text-align: center;
			background-color: #fff;
			border-radius: 30rpx;
		}
	}
}

:deep(.wd-tabs__nav-item) {
	white-space: normal;
	word-wrap: break-word;
	font-size: 24rpx;
	line-height: 36rpx;
}
</style>
